<template>
  <div>
    <div class="login">登录</div>
    <div class="form mgt-60 flex-row-start">
      <div>账 号</div>
      <input v-model="mobile" type="text" placeholder="请输入您的账号">
    </div>
    <div class="form flex-row-start">
      <div>密 码</div>
      <input v-model="password" type="password" placeholder="请输入密码">
    </div>
    <div class="form submit" @click="loginSys">
      登录
    </div>
  </div>
</template>
<script>
import { login } from '../../api/apis'
import { setToken, getToken } from '@/utils/auth'
import { Toast } from 'vant'
export default {
  data() {
    return {
      mobile: '',
      password: ''
    }
  },
  methods: {
    loginSys() {
      login(this.mobile, this.password).then(res => {
        console.log(res)
        Toast('登录成功')
        if (res.code === 200) {
          setToken(res.data)
          this.$router.go(-1)
        }
        console.log('..............', getToken())
      })
    }
  }
}
</script>

<style scoped>
body {
  background: #f2f2f2;
  margin: 0 !important;
}

.login {
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 50px;
  font-size: 50px;
  height: 609px;
  letter-spacing: 5px;
  background-image: url("../../assets/login-bg.png");
  background-size: 100% 100%;
}

.form {
  margin: 30px;
  padding: 40px;
  font-size: 36px;
  background: #fff;
  border-radius: 100px;
  text-align: center;
}

.form > div:first-child {
  width: 160px;
  text-align: center;
}

input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 36px;
  width: 550px;
}
input:focus {
  border: none;
}

.submit {
  color: #fff;
  background: #4cd07a;
  /* font-size: 40px; */
  margin-top: 50px;
}
</style>
